<template>
	<view class="container">
		<view class="index-head">
			<view class="head-title">{{headTitle}}</view>
			<image src="/static/index/pic_portrait@2x.png" class="head-icon"></image>
		</view>

		<view class="content">
			<indexColumn class="col-view" v-for="(item,index) in indexColsData" :key="index" :title="item.col_title"
				:entryData="item.col_datas" @onEntryClick="onEntryClick"></indexColumn>
		</view>

	</view>
</template>

<script>
	import indexColumn from "@/_components/indexColumn.vue"
	import indexData from "@/common/index_data.js"
	import {
		getDictionary
	} from "@/service/services.js"

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			indexColumn
		},

		computed: {
			...mapState(['dictionary'])
		},

		data() {
			return {
				headTitle: "大港油田",
				indexColsData: indexData
			}
		},

		onReady() {},

		mounted() {
			if (this.dictionary.length == 0) {
				this.requireSelectionDatas();
			}
		},

		methods: {
			...mapMutations(['setDictionary']),
			onEntryClick(e) {
				let url = e.linkPage + "?";
				let paramMap = e.linkParam;
				Object.keys(paramMap).forEach(function(key) {
					let v = paramMap[key];
					url += key + "=" + v;
					url += "&";
				});

				uni.navigateTo({
					url: url
				})
			},

			requireSelectionDatas() {
				uni.showLoading({
					mask: true
				})
				getDictionary().then((res) => {
					console.log("requireSelectionDatas")
					console.log(res)
					uni.hideLoading()
					if (res.code == 0) {
						this.setDictionary(res.data);
					} else {
						uni.showToast({
							icon: "none",
							title: "关键数据更新失败"
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		height: 100%;
		width: 100%;
		// background-image: url(/static/bg/index.png);
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
	}

	.index-head {
		width: 100%;
		height: 176upx;
		position: relative;
		background-image: url(/static/index/pic_head_figure_bg@2x.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.head-title {
			position: absolute;
			left: 32upx;
			bottom: 22upx;
			font-size: 32upx;
			color: #FFFFFF;
			line-height: 44upx;
		}

		.head-icon {
			width: 68upx;
			height: 68upx;

			position: absolute;
			right: 32upx;
			bottom: 10upx;
		}
	}

	.content {
		width: 100%;
		// height: 100%;

		.col-view {
			width: 100%;
			// 	height: 300upx;
		}
	}
</style>
